<template>
	<view class="topic-detail" @click="selectOriginal">
		<!-- 		<titlebar mode="文章" :back="true" :backToIndex="false" :backgroundColor="backgroundColor" text="文章">
			<view slot="title">
				#ifdef APP-PLUS||H5
				<image class="showMore" mode='aspectFit' v-if="currentUserPhone == userInfo.phone"
					src="https://dnsverify.pfmoto.com/appstatic/community/more.png" @click="showMore" />
				<image class="showMore" mode='aspectFit' v-else
					src="https://dnsverify.pfmoto.com/appstatic/community/share.png" @click="shareAction" />
				<view class="titleText">{{text}}</view>
				#endif
				#ifdef MP-WEIXIN
				<image class="showMore" mode='aspectFit' v-if="currentUserPhone == userInfo.phone"
					src="https://dnsverify.pfmoto.com/appstatic/community/more.png" @click="showMore" />
				<view class="titleText">{{text}}</view>
				#endif
			</view>
		</titlebar>
 -->
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar :title="text" :autoBack="true" :bgColor="backgroundColor" leftIconColor="#000000"
			titleStyle="color:#000000;">
			<view class="u-nav-slot" slot="right">
				<image style="width: 24px;height: 24px;" mode='aspectFit' v-if='isLocalResources=="true"'
					src="https://dnsverify.pfmoto.com/appstatic/community/share.png" @click.stop="shareAction" />
				<image style="width: 24px;height: 24px;" mode='aspectFit' v-else-if="currentUserPhone == userInfo.phone"
					src="https://dnsverify.pfmoto.com/appstatic/community/more.png" @click.stop="showMore" />
				<image style="width: 24px;height: 24px;" mode='aspectFit' v-else
					src="https://dnsverify.pfmoto.com/appstatic/community/share.png" @click.stop="shareAction" />
			</view>
		</u-navbar>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :title="text" :autoBack="false" :bgColor="backgroundColor" leftIconColor="#000000"
			titleStyle="color:#000000;">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="20px" color="#303133" @click.stop="autoBack"></u-icon>
				<block v-if="isLocalResources=='false'">
					<image style="width: 24px;height: 24px;padding-left: 10px;" mode='aspectFit'
						v-if="currentUserPhone == userInfo.phone"
						src="https://dnsverify.pfmoto.com/appstatic/community/more.png" @click.stop="showMore" />
				</block>
			</view>
		</u-navbar>
		<!-- #endif -->

		<z-paging ref="paging" v-model="commentList" @scroll="pageScroll" @query="loadCommentList" :fixed="true"
			:auto="false" :showLoadingMoreNoMoreView='isLocalResources=="false"?true:false'>
			<showMoreView :isShowMore="isShowMore" @shareAction="shareAction" @deleteAction="deleteAction">
			</showMoreView>
			<image class="top-img" @click.stop="previewImage(detail.webpublishCoverArticle)"
				:src="detail.webpublishCoverArticle|| 'https://dnsverify.pfmoto.com/appstatic/community/article-cover-default.png'"
				mode='aspectFill' />
			<view class="title">
				{{detail.titleArticle}}
			</view>
			<Card :communtyList="communtyList" type="detail" :isLocalResources='isLocalResources' :loginId="loginId">
			</Card>

			<view class='comments-pop' v-if="isLocalResources=='false'">

				<view class='pop-con' v-if="commentList.length">
					<view class='hot-com' v-if="commentList.length>=3">
						<view class='com-title'>最热评论</view>
						<view class='com-list'>
							<view class='l-first'>
								<image class="header-img" mode='aspectFit' @error="imgerror($event, 0,'hot')"
									:src="hotList.firstComment.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
								</image>
								<view class='list-con'>
									<!-- <view class='list-name'>{{hotList.firstComment.userName}}</view> -->
									<view class='list-name'
										v-if="hotList.firstComment.wechatName==''||hotList.firstComment.wechatName==null">
										<view
											v-if="hotList.firstComment.phone==null||hotList.firstComment.phone==undefined">
											已注销用户
										</view>
										<view v-else>
											{{hotList.firstComment.phone.substr(0, 3) + '*****' + hotList.firstComment.phone.substr(8)}}
										</view>
									</view>
									<view class='list-name' v-else>{{hotList.firstComment.wechatName}}</view>




									<view class='list-content' @click.stop="selectCommpent(hotList.firstComment,1)">
										{{hotList.firstComment.content}}
									</view>
									<image @click.stop="previewImage(hotList.firstComment.picture)"
										v-if="hotList.firstComment.picture" class='list-img' mode='widthFix'
										:src="hotList.firstComment.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
									</image>
									<view class='list-num'><text>{{hotList.firstComment.commentTime | timeFrom}}</text>
										<text
											v-if="hotList.firstComment.secondCount>0">共{{hotList.firstComment.secondCount||0}}条回复</text>
									</view>
								</view>
								<view class='like-box' @click.stop="thumbCommuntyTouched(hotList.firstComment)">
									<image class='like-img' v-if="hotList.firstComment.isThumbs"
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
										mode="aspectFill">
									</image>
									<image class='like-img' v-else
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
										mode="aspectFill">
									</image>


									<view class='like-num'>{{hotList.firstComment.thumbsNum||0}}</view>
								</view>
							</view>
							<view class="" v-if="hotList.secondComments&&hotList.secondComments.length>0">
								<view class='l-first sub' v-for="(k,index) in hotList.secondComments" :key="index">
									<image class="header-img" mode='aspectFit'
										:src="k.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
									</image>
									<view class='list-con'>
										<!-- <view class='list-name'>{{k.userName}}</view> -->
										<view class='list-name' v-if="k.wechatName==''||k.wechatName==null">
											<view v-if="k.phone==null||k.phone==undefined">
												已注销用户
											</view>
											<view v-else>
												{{k.phone.substr(0, 3) + '*****' + k.phone.substr(8)}}
											</view>
										</view>
										<view class='list-name' v-else>{{k.wechatName}}</view>


										<view class='list-content' @click.stop="selectComment2(k,1)">{{k.content}}</view>
										<image @click.stop="previewImage(k.picture)" v-if="k.picture" class='list-img'
											mode='widthFix'
											:src=" k.picture ||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
										</image>
										<view class='list-num'>{{k.commentTime | timeFrom}}</view>
										<view class="more-comment" v-if="hotList.firstComment.secondCount>1"
											@click.stop="enterCommentDetail(hotList.firstComment)">
											查看全部回复
										</view>
									</view>
									<view class='like-box' @click.stop="thumbCommuntyTouched(k)">
										<!-- 	<image  class='like-img' mode='widthFix'
										src='https://dnsverify.pfmoto.com/appstatic/community/ac-1.png'></image> -->
										<image class='like-img' v-if="k.isThumbs"
											src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
											mode="aspectFill">
										</image>
										<image class='like-img' v-else
											src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
											mode="aspectFill">
										</image>
										<view class='like-num'>{{k.thumbsNum||0}}</view>
									</view>
								</view>
							</view>

						</view>
					</view>
					<view class='new-com' v-if="commentList.length>0">
						<view class='com-title'>最新评论</view>
						<view class='com-list' v-for="(item,index) in commentList" :key="index">
							<view class='l-first'>
								<image class="header-img" mode='aspectFit' @error="imgerror($event, index,'new')"
									:src="item.firstComment.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
								</image>
								<view class='list-con'>
									<!-- <view class='list-name'>{{item.firstComment.userName}}</view> -->

									<view class='list-name'
										v-if="item.firstComment.wechatName==''||item.firstComment.wechatName==null">
										<view v-if="item.firstComment.phone==null||item.firstComment.phone==undefined">
											已注销用户
										</view>
										<view v-else>
											{{item.firstComment.phone.substr(0, 3) + '*****' + item.firstComment.phone.substr(8)}}
										</view>
									</view>
									<view class='list-name' v-else>{{item.firstComment.wechatName}}</view>


									<view class='list-content' @click.stop="selectCommpent(item.firstComment,1)">
										{{item.firstComment.content}}
									</view>
									<image @click.stop="previewImage(item.firstComment.picture)"
										v-if="item.firstComment.picture" class='list-img' mode='widthFix'
										:src="item.firstComment.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
									</image>
									<view class='list-num'><text>{{item.firstComment.commentTime | timeFrom}}</text>
										<text v-if="item.firstComment.secondCount>0">
											共{{item.firstComment.secondCount}}条回复</text>
									</view>
								</view>
								<view class='like-box' @click.stop="thumbCommuntyTouched(item.firstComment)">
									<image class='like-img' v-if="item.firstComment.isThumbs ==1"
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
										mode="aspectFill">
									</image>
									<image class='like-img' v-else
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
										mode="aspectFill">
									</image>
									<view class='like-num'>{{item.firstComment.thumbsNum||0}}</view>
								</view>
							</view>
							<view class="" v-if="item.secondComments&&item.secondComments.length>0">
								<view class='l-first sub' v-for="(k,index) in item.secondComments" :key="index">
									<image class="header-img" mode='aspectFit'
										:src="k.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
									</image>
									<view class='list-con'>
										<!-- <view class='list-name'>{{k.userName}}</view> -->
										<view class='list-name' v-if="k.wechatName==''||k.wechatName==null">
											<view v-if="k.phone==null||k.phone==undefined">
												已注销用户
											</view>
											<view v-else>
												{{k.phone.substr(0, 3) + '*****' + k.phone.substr(8)}}
											</view>
										</view>
										<view class='list-name' v-else>{{k.wechatName}}</view>

										<view class='list-content' @click.stop="selectComment2(k,1)">{{k.content}}</view>
										<image @click.stop="previewImage(k.picture)" v-if="k.picture" class='list-img'
											mode='widthFix'
											:src=" k.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
										</image>
										<view class='list-num'>{{k.commentTime | timeFrom}} </view>
										<view class="more-comment" v-if="item.firstComment.secondCount>1"
											@click.stop="enterCommentDetail(item.firstComment)">
											查看全部回复
										</view>
									</view>
									<view class='like-box' @click.stop="thumbCommuntyTouched(item.secondComments[0])">


										<image class='like-img' v-if="item.secondComments[0].isThumbs"
											src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
											mode="aspectFill">
										</image>
										<image class='like-img' v-else
											src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
											mode="aspectFill">
										</image>
										<view class='like-num'>{{item.secondComments[0].thumbsNum||0}}</view>

									</view>
								</view>
							</view>

						</view>
					</view>

				</view>

			</view>


		</z-paging>

		<!-- 评论输入框 -->
		<InputPanel :commentType="commentType" :commentInfo="commentInfo" :placeholder="placeholder" :replyLevel="replyLevel"
			@changeHolder="changeHolder" @createComment="createCommentResult" :total="total"
			:itemValue="communtyList[0]" v-if="isLocalResources=='false'" />
		<u-popup :show="show">
			<view class="popup">
				<view class="action-wraper">
					<text style="visibility: hidden;">确定</text>
					<text>分享到</text>
					<image @click="show = !show" src="https://dnsverify.pfmoto.com/appstatic/community/x.png" mode="">
					</image>
				</view>
				<view class="share-wraper">
					<view class="item" @click="shareType(1)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-1.png" mode="">
						</image>
						<text>微信</text>
					</view>
					<view class="item" @click="shareType(2)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-2.png" mode="">
						</image>
						<text>朋友圈</text>
					</view>
					<view class="item" @click="shareType(3)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-3.png" mode="">
						</image>
						<text>微博</text>
					</view>
				</view>

			</view>

		</u-popup>
		<clxDialog :isShow='showDelete' @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel' :title="title">
		</clxDialog>

	</view>
</template>

<script>
	// pages/sns/sns_detail/sns_detail.js
	import titlebar from '@/components/titlebar/titlebar'
	import titlebara from '@/components/titlebar/titlebar'
	import clxDialog from "@/components/clx-dialog/clx-dialog";
	import showMoreView from '@/components/showMoreView';

	import Card from "@components/card/card";
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	const dialog = require("@utils/dialog.js");
	import InputPanel from '@/components/inputPanel/inputPanel.vue'
	const dateForCalendar = require("@utils/dateForCalendar.js");
	export default {
		data() {
			return {
				loginId: '',
				flag: false,
				comment: '',
				commentInfo: {},
				commentType: 0,
				text: '文章',
				isShowMore: false,
				title: '确认删除该文章?',
				placeholder: "说点什么",
				showDelete: false,
				show: false,
				isOk: false,
				selector: ['拍摄', '从手机相册选择'],
				myComment: '',
				opacity: 0,
				color: '#fff',
				backgroundColor: 'rgba(255, 255, 255, 0)',
				currentScrollTop: 0,
				addBottom: true,
				topicId: '',
				topicItem: {},
				detail: {},
				communtyList: [

				],
				commentList: [],
				pagination: {
					loadMore: false,
					page: 1,
					totalPage: 1,
					limit: 20,
					length: 100
				},
				currentUserPhone: '',
				hotList: {
					firstComment: {
						secondCount: 0
					},
					secondComments: []
				},
				fileList: [{
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				}],
				total: 0,
				pagingHeight: '300px',
				userInfo: app.globalData.userInfo || {
					phone: ''
				},
				isLocalResources: 'false',
				
				replyLevel:'',
			};
		},

		components: {
			titlebar,
			titlebara,
			clxDialog,
			Card,
			showMoreView,
			InputPanel
		},
		props: {},
		onPageScroll: function(e) {
			let opacity = Number((e.scrollTop / 340).toFixed(2))
			console.log(opacity)
			this.backgroundColor = `rgba(255, 255, 255, ${opacity})`


			// 底部按钮滚动效果
			clearTimeout(timer)
			this.addBottom = false
			let timer = setTimeout(() => {
				this.addBottom = true
			}, 1000)

		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options && options.id) {
				if (options.isLocalResources == 'true') {
					this.text = '本地资源详情'
					this.isLocalResources = 'true'
				}
				this.uuid = options.id
				this.loadDetail(options.id);

			}

			// this.loadData(true);

			//更新已读
			if (options && options.id && (options.from == "message" || options.from == "notice") && options.myId) {
				
				this.update2Read(options.id, options.myId,options.from);
			}
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			app.trackPage(util.getNavigationBarTitle());
			this.loginId = app.getUserId()
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.loadData(true);
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},

		methods: {
			selectOriginal(){
				this.changeHolder('说点什么')
			},
			autoBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			pageScroll(e) {
				let opacity = Number((e.detail.scrollTop / 340).toFixed(2))

				this.backgroundColor = `rgba(255, 255, 255, ${opacity})`
			},
			createCommentResult(val) {
				console.log(val)
				let info = {
					content: val.content,
					picture: val.picture,
					commentTime: dateForCalendar.yearTime('yearTime', new Date()),
					wechatName: app.globalData.userInfo.wechatName ? app.globalData.userInfo.wechatName : app
						.globalData.userInfo.phone.substr(0, 3) + '*****' + app.globalData.userInfo.phone.substr(8),
					userimages: app.globalData.userInfo.userimages,
					uuid: val.id,
					isThumbs:0,
					thumbsNum:0,
				}
				this.commentList.map(item => {
					if (item.firstComment.uuid == val.pid) {
						item.secondComments.splice(0, 1, info)
						item.firstComment.secondCount = item.firstComment.secondCount + 1
					}
				})

				if (this.hotList.firstComment.uuid == val.pid) {
					this.hotList.secondComments.splice(0, 1, info)
					this.hotList.firstComment.secondCount = this.hotList.firstComment.secondCount + 1
				}

				if (this.uuid == val.pid) {
					var obj = {
						firstComment: info,
						secondComments: []
					}
					if (this.commentList.length > 0) {
						this.commentList.splice(0, 0, obj)
					} else {
						this.commentList.push(obj)
					}

				}

			},
			changeHolder(val) {
				this.placeholder = val
				// this.commentInfo.uuid = ''
			},
			uploadPercent() {},
			//更新已读
			update2Read: function(id, myId,from) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_SYS_SENDMSG_UPDATE_LEVCMSGUSERREADY;
				var params = {
					// "id": id,
					"id": myId,
					"isType": 2
				};
				network.post(uri, params, 'json').then(res => {
					if (res.code == 200) {
						console.log("已读", JSON.stringify(res));
						if(from=='message'){
							//回调上一个页面
							let pages = getCurrentPages();
							if (pages.length >= 3) {
								let prePage = pages[pages.length - 2];
								let preprePage = pages[pages.length - 3]
								// #ifdef H5
								prePage.refresh(myId);
								preprePage.refresh();
								// #endif
								// #ifdef APP-PLUS
								prePage.$vm.refresh(myId);
								preprePage.$vm.refresh();
								// #endif
							}
						}else{
							let pages = getCurrentPages();
							let prePage = pages[pages.length - 2];
							// #ifdef H5
							prePage.refresh(myId);
							// #endif
							// #ifdef APP-PLUS
							prePage.$vm.refresh(myId);
							// #endif
						}
						util.syncBadge(getApp())
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			//图片加载错误默认图
			imgerror: function(e, img_index, type) {
				var that = this
				if (type == 'hot') {
					that.hotList.firstComment.userimages =
						"https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png"
				} else {
					that.commentList[img_index].firstComment.userimages =
						"https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png"
				}

			},
			imgerrorUser: function(e) {
				var that = this

			},
			enterCommentDetail(row) {
				uni.navigateTo({
					url: '/module_community/pages/moments/list/list?from=article&row=' + JSON.stringify(row)
				})
			},
			showMore: function() {
				this.isShowMore = !this.isShowMore
			},
			//展示删除弹窗
			deleteAction: function() {
				if (util.isLogin(getApp())) {
					if (this.currentUserPhone == app.globalData.userInfo.phone) {
						this.showDelete = true
					} else {
						uni.showToast({
							title: '只能删除自己的文章',
							duration: 3000,
							icon: 'none'
						})
					}

					this.isShowMore = false

				} else {
					uni.setStorageSync('articleDetailId', this.uuid)
					util.jumpLogin("articleDetail")
				}
			},
			//删除弹窗-确定按钮
			dialogConfirm(e) {
				this.showDelete = false
				this.onConfirmDelete()
			},
			//删除弹窗-取消按钮
			dialogCancel() {
				this.showDelete = false
				this.delItem = ""
			},
			//确认删除方法
			onConfirmDelete() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_DEL_PERSONAL_COMMUNITY + '?id=' + this.uuid +
					'&key=2&value=1';
				var params = {


				};
				network.post(uri, params, 'json').then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						uni.showToast({
							title: "删除成功",
							duration: 3000,
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					console.error(res, 'err')
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);

				});
			},

			selectCommpent(item, type) {
				this.commentType = type
				this.commentInfo = item
				var name = item.wechatName || item.phone
				this.placeholder = "回复@" + name + ':'
			},
			selectComment2(item, type){//点击二级
				this.replyLevel='2'
				this.commentType = type
				this.commentInfo = item
				var name = item.wechatName || item.phone
				this.placeholder = "回复@" + name + ':'
			},
			myCommentInput: function(e) {
				this.comment = e.detail.value
				if (this.comment == '' && this.fileList.length == 1) {
					this.isOk = false
				} else {
					this.isOk = true
				}
			},



			/**   
			 * 预览图片  
			 */
			previewImage: function(img) {

				//#ifndef MP-WEIXIN
				wx.previewImage({
					current: 0,
					urls: [img],
				});
				//#endif
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
			loadDetail: function(id) {
				var that = this;
				var uri = ''
				if (this.isLocalResources == 'true') {
					uri = app.globalData.config.interfaces.URL_LOCAL_RESOURCES_DETAIL;
				} else {
					uri = app.globalData.config.interfaces.URL_COMMUNTIY_DETAIL;
				}
				var params = {
					"id": id,
					"loginId": app.getUserId()
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.detail = res.data
						that.currentUserPhone = res.data.phone

						that.$nextTick(function() {
							res.data.content = this.formatRichText(res.data.content)
							that.communtyList = [res.data]
							that.total = res.data.commentNum
							that.$refs.paging.reload()
						})

						that.loadData();
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			loadData: function() {
				var that = this



			},
			loadHotCommenyList() {

				var that = this;
				var uri = app.globalData.config.interfaces.URL_COMMENT_HOT;
				var params = {
					"pageNum": that.pagination.page,
					"pageSize": that.pagination.limit,
					"id": this.detail.id,
					"loginId": app.getUserId() || ""
				};
				network.get(uri, params, 'form').then(res => {
					uni.stopPullDownRefresh();

					if (res.code == 200) {
						that.hotList = res.data

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})

				});
			},
			loadCommentList: function(pageNo, pageSize) {
				if (this.isLocalResources == 'true') {
					return
				}

				this.loadHotCommenyList()
				var that = this;
				var uri = app.globalData.config.interfaces.URL_COMMENT_LIST;
				var params = {
					"pageNum": pageNo,
					"pageSize": pageSize,
					"id": this.detail.id,
					"loginId": app.getUserId() || ""
				};
				network.get(uri, params, 'form').then(res => {


					if (res.code == 200) {

						that.$refs.paging.complete(res.data.list);
						if (res.data.list.length > 5) {
							that.pagingHeight = '1200upx'
						}
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			shareAction(type) {
				if (util.isLogin(getApp())) {
					this.isShowMore = false
					this.show = true
					// uni.showToast({
					// 	title: '待开放平台权限申请',
					// 	duration: 3000,
					// 	icon: 'none'
					// })

				} else {
					uni.setStorageSync('momentDetailId', this.uuid)
					util.jumpLogin("momentDetail")
				}
			},
			//点赞社区动态
			thumbCommuntyTouched: function(item) {
				if (util.isLogin(getApp())) {
					
					var uri = app.globalData.config.interfaces.URL_COMMUNTIY_THUMB;
					var thumbsFlag
					item.isThumbs == 0 ? thumbsFlag = 1 : thumbsFlag = 0
					var params = {
						"id": item.uuid,
						"loginId": app.getUserId(),
						"isfrom": 1,
						"thumbsFlag": thumbsFlag
					};
					network.post(uri, params, 'form').then(res => {
						if (res.code == 200) {
							item.thumbsNum = item.thumbsNum + (!item.isThumbs ? 1 : -1);
							item.isThumbs = !item.isThumbs;
							if (this.hotList && this.hotList.firstComment.uuid == item.uuid) {
								this.hotList.firstComment.thumbsNum = item.thumbsNum
								this.hotList.firstComment.isThumbs = item.isThumbs;
							}
						} else {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch(res => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
						console.error(res);
					});
				} else {
					// util.jumpLogin();
					uni.setStorageSync('articleDetailId', this.uuid)
					util.jumpLogin("articleDetail")




				}
			},
			//动态详情
			snsDetail: function(row) {

				uni.navigateTo({
					url: '/module_community/pages/moments/detail/detail?id=' + JSON.stringify(row),
					fail(err) {
						console.log(err, 'err')
					}
				});
			},
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin-top:15px;margin-bottom:15px;border-radius:5px"'
				);
				newContent = newContent.replace(/\<p/gi,
					'<p style="overflow-wrap: break-word;margin: 20rpx 0; text-align: left; width: 100% ; word-break :break-all; white-space: pre-wrap; word-wrap: break-word;"'
				);
				return newContent;
			},
			shareType(type) {

				var that = this
				var url = "https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/community/share.jpg";
				
				var imgCover = this.communtyList[0].webpublishCoverArticle;
				if(imgCover){
					imgCover = imgCover+"?x-amz-process=image/resize,w_500";
				}

				if (type == 1) {
					var path = ''
					if (that.isLocalResources == 'true') {
						path = 'module_community/pages/article/detail/detail?id=' + this.communtyList[0]
							.id + '&isLocalResources=true'
					} else {
						path = 'module_community/pages/article/detail/detail?id=' + this.communtyList[0]
							.id
					}

					uni.share({
						provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
						scene: "WXSceneSession", //分享到聊天界面
						type: 5, //分享形式 5:小程序
						imageUrl: imgCover || url, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
						title: that.communtyList[0].content.replace(/<\/?.+?>/g, "").replace(/ /g, ""),
						miniProgram: {
							id: 'gh_c784b84e778d', //微信小程序原始id
							path: path,
							type: 0, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
							webUrl: 'https://www.pfmoto.com/app' //兼容低版本的网页链接
						},
						success: ret => {
							console.log(JSON.stringify(ret));
						},
						fail: ret => {
							console.log("fail" + JSON.stringify(ret));
						}
					});

				} else if (type == 2) {
					console.log('---------')
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 0,
						href: "https://www.pfmoto.com/app",
						title:that.communtyList[0].content.replace(/<\/?.+?>/g, "").replace(/ /g, ""),
						summary: '欢迎体验派方机车',
						imageUrl: imgCover || url,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (type == 3) {
					uni.share({
						provider: "sinaweibo",

						title: '欢迎下载派方APP',
						summary: that.communtyList[0].content.replace(/<\/?.+?>/g, "").replace(/ /g, ""),
						imageUrl: '', //官方规定分享图比例是5：4,其它尺寸可能显示不全。
						href: 'https://www.pfmoto.com/app',
						type: 0,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));

						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));

						}
					});

				}
				this.show = false
			},

		}
	};
</script>
<style lang="scss" scoped>
	.like-box {
		display: flex;
	}

	.titleText {
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 16px;
		align-items: center;
		display: flex;
		position: absolute;
		top: calc(50% - 10px);
		left: calc((100% - 40px)/2);
	}

	.showMore {
		width: 24px;
		height: 24px;
		position: absolute;
		left: 44px;
		top: calc(50% - 12px);
		/*#ifdef APP-PLUS||H5*/
		left: calc(100% - 36px);
		/*#endif*/
	}

	.share-wraper {
		display: flex;

		justify-content: space-around;
		padding: 80rpx;
	}

	.share-wraper .item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.share-wraper .item image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
	}

	.share-wraper .item text {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		text-align: center;
		letter-spacing: -0.24px;
		color: #3D3A3A;
	}


	.play image {
		display: block;
		transform: translate(-50%, -50%);
		position: absolute;
		left: 50%;
		top: 50%;
	}

	.action-wraper {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
	}

	.action-wraper text {
		font-size: 32rpx;
		font-weight: 600;
		color: #3d3a3a;
	}

	.action-wraper image {
		width: 48rpx;
		height: 48rpx;
	}




	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		padding-top: 10px;
		padding-bottom: 10px;

		display: flex;
		padding-right: 23px;
		align-items: center;
	}

	.active {
		color: #ea5454 !important;
	}

	.login-button {

		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		display: flex;
		align-items: center;


		color: #ADB0AE;
	}

	.upload-img image {
		width: 40rpx;
		height: 36rpx;
		margin-right: 20rpx;
		margin-top: 8rpx;
	}

	.myComment {
		color: #BDBDBD;
		font-size: 24rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: 100%;
	}

	.inputGreybg {
		background-color: #F7F8FA;
		line-height: 68rpx;
		height: 68rpx;
		/* width: 550rpx; */
		position: relative;
		margin: auto;
		border: none;
		border-radius: 4rpx;
		font-size: 32rpx;
		color: #333333;
		width: calc(100% - 190rpx);
		flex-direction: row;
		display: flex;
		align-items: center;

	}

	.uploadImg {
		margin-top: 40rpx;

		.videoClass {
			width: 100%;

			#myVideo {
				width: 100%;
			}
		}

		.imageList {
			margin: 6rpx 6rpx 0 0;
			display: inline-block;
			position: relative;

			.image {
				width: 216rpx;
				height: 216rpx;
				display: inline-block;
				border-radius: 20rpx;
			}

			.delImg {
				position: absolute;
				right: 8rpx;
				top: 8rpx;
				width: 40rpx;
				height: 40rpx;
				z-index: 2;
			}
		}

		.onlyImageList {
			.onlyImage {
				width: 100%;
				display: inline-block;
			}
		}
	}

	.uploadBtn {
		width: 216rpx;
		height: 216rpx;
		border-radius: 20rpx;
		display: inline-block;
	}

	.videoView {
		width: 672rpx;
		height: 522rpx;
		border-radius: 20rpx;
		display: inline-block;
		margin-bottom: 100rpx;
	}

	/deep/.zp-paging-container {
		padding-bottom: 120rpx;
	}

	page {
		background: #fff;
		color: #3D3A3A;
	}

	.title {
		padding: 20rpx 30rpx;
		font-size: 32rpx;
		color: #3D3A3A;
		word-wrap: break-word;
	}

	.topic-detail {
		width: 100vw;
		box-sizing: border-box;

		.top-img {
			width: 100%;
			height: 600rpx;
		}

		.t-title {
			display: flex;
			align-items: center;
			line-height: 114rpx;
			font-size: 36rpx;

			image {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				margin-left: 32rpx;
				margin-right: 12rpx;
			}
		}

		.t-sub {
			margin: 0 32rpx;
			padding: 20rpx;
			background: #EDEDED;
			border-radius: 4rpx;
			font-size: 28rpx;
			line-height: 40rpx;
		}

		.card-con {
			.con-title {
				line-height: 144rpx;
				font-weight: 600;
				font-size: 32rpx;
				padding-left: 32rpx;
			}

			/deep/.user-card {
				border-bottom: 2rpx solid #EDEDED;
			}

			/deep/.user-card:last-child {
				border-bottom: none;
			}
		}

		.join-topic {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 272rpx;
			line-height: 88rpx;
			position: fixed;
			left: calc(50% - 136rpx);
			bottom: 20rpx;
			background: #EA5404;
			box-shadow: 0px 0px 20px rgba(234, 84, 4, 0.2);
			border-radius: 4rpx;
			color: #fff;
			font-size: 28rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			transition: bottom;
			transition-duration: 0.3s;
		}

		.bottom {
			bottom: -300rpx;
		}
	}

	/deep/.zp-l-container {
		margin-bottom: 50upx;
	}

	.comments-pop {
		width: 100vw;
		color: #3D3A3A;
		font-size: 28rpx;


		.pop-con {
			width: 100%;
			position: relative;
			box-sizing: border-box;
			padding: 60rpx 32rpx 60rpx;
			background: #FFFFFF;
			border-radius: 4px 4px 0px 0px;

			overflow: scroll;

			.con-title {
				width: 100%;
				box-sizing: border-box;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 600;
				font-size: 32rpx;
				height: 112rpx;
				line-height: 112rpx;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #fff;
				opacity: 1;
				z-index: 99;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.hot-com,
			.new-com {
				.com-title {
					margin: 32rpx 0 16rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.com-list {
					.l-first {
						display: flex;
						justify-content: space-between;
						padding-top: 32rpx;

						.header-img {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
						}

						.list-con {
							flex: 1;
							padding-left: 32rpx;
							line-height: 40rpx;

							.list-name {
								color: #000;
							}

							.list-content {
								margin-top: 40rpx;
								word-break: break-all;
							}

							.list-img {
								width: 200rpx;
								width: 200rpx;
								margin: 20rpx 0 0 0;
							}

							.list-num {
								font-size: 24rpx;
								line-height: 34rpx;
								color: #ADB0AE;
								margin-top: 10rpx;
							}

							.list-num text {
								margin-right: 10rpx;
							}
						}

						.like-box {
							.like-img {
								width: 34rpx;
								height: 34rpx;
								vertical-align: middle;
							}

							.like-num {
								display: inline-block;
								font-size: 24rpx;
								color: #ADB0AE;
								margin-left: 4rpx;
								position: relative;

							}
						}

					}

					.sub {
						padding-left: 96rpx;
					}
				}
			}

			.all-footer {
				font-size: 28rpx;
				line-height: 76rpx;
				color: #ADB0AE;
				text-align: center;
			}

			.input-box {
				width: 100%;
				height: 108rpx;
				display: flex;
				align-items: center;
				position: fixed;
				bottom: 100rpx;
				left: 0;
				background-color: #fff;
				z-index: 99;

				input {
					flex: 1;
					background: #EDEDED;
					border-radius: 4rpx;
					height: 68rpx;
					line-height: 68rpx;
					margin-left: 32rpx;
					padding-left: 32rpx;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin: 0 32rpx;
				}

				.send {
					font-size: 32rpx;
					line-height: 44rpx;
					color: #ADB0AE;
					margin-right: 32rpx;
				}
			}
		}
	}

	.more-comment {

		font-size: 24rpx;
		color: #ea5404;
		margin-top: 20rpx;
	}

	.all-footer {
		text-align: center;
	}

	.u-nav-slot {
		display: flex;
		flex-direction: row;
	}
</style>
